<%@ page import="java.util.Enumeration" %><%--
  Created by IntelliJ IDEA.
  User: TANGYU
  Date: 2024/4/18
  Time: 12:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
    }

    h2 {
      text-align: center;
      margin-top: 20px;
      color: #333;
    }

    .container {
      width: 50%;
      margin: 20px auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    form {
      margin-top: 20px;
    }

    table {
      width: 100%;
    }

    td {
      padding: 5px;
    }

    .txtBox {
      padding: 5px;
      width: 100%;
      font-size: 16px;
    }

    input[type="submit"], input[type="reset"] {
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    input[type="submit"]:hover, input[type="reset"]:hover {
      background-color: #45a049;
    }
  </style>
  <script>
    function validateForm() {
      var password = document.getElementById('password').value;
      var confirmPassword = document.getElementById('repassword').value;

      if (password !== confirmPassword) {
        document.getElementById('repasswordError').innerText = '密码不一致';
        return false;
      } else {
        document.getElementById('repasswordError').innerText = '';
        return true;
      }
    }
  </script>
</head>
<body>
<%
  // 检查 application 中是否已经存在计数器属性
  Integer count = (Integer) application.getAttribute("visitCount");
  if (count == null) {
    count = 0;
  }
  // 增加访问次数
  count++;
  application.setAttribute("visitCount", count);
%>
<h2>本网站访问次数: <%= count - 1%></h2>
<div class="container">
  <h3>请输入注册信息</h3>
  <form name="form1" method="post" action="InsertServlet" onsubmit="return validateForm()">
    <table>
      <tr>
        <td>用户姓名：</td>
        <td><input type="text" name="username" value="" class="txtBox"/></td>
      </tr>
      <tr>
        <td>用户密码：</td>
        <td><input type="password" id="password" name="password" value="" class="txtBox"/></td>
      </tr>
      <tr>
        <td>确认用户密码：</td>
        <td><input type="password" id="repassword" name="repassword" value="" class="txtBox"/></td>
        <td><span id="repasswordError" style="color: red;"></span></td>
      </tr>
      <tr>
        <td>备注信息：</td>
        <td><input type="text" name="information" value="Hello,This is user" class="txtBox"/></td>
      </tr>
      <tr>
        <td>兴趣爱好：</td>
        <td>
          <input type="checkbox" name="hobby" value="Java"/>Java
          <input type="checkbox" name="hobby" value="Cpp"/>Cpp
          <input type="checkbox" name="hobby" value="Python"/>Python
          <input type="checkbox" name="hobby" value="Golang"/>Golang
        </td>
      </tr>
      <!-- 以下是提交、取消按钮 -->
      <tr>
        <td><input type="submit" value="注册用户"/></td>
        <td><input type="reset" value="取消"/></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>